<%--
  Created by IntelliJ IDEA.
  User: 旧人
  Date: 2018/12/7
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>教室信息列表</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">



    <script type="text/javascript" src="/resources/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script type="text/javascript" src="/resources/layui/layui.js"></script>

    <link rel="stylesheet" href="/resources/layui/css/style.css">

    <script type="text/javascript" src="/resources/js/vip/vip_comm.js"></script>

    <script>
        layui.use('layer', function () {
            var layer = layui.layer;
            $ = layui.jquery
        });
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1,#test2,#editClazzOpenTime,#editClazzColseTime' //指定元素
                ,type: 'time'
            });
        });


        function clickThis() {
            //弹出新增信息框
            layer.open({
                type: 1,
                title: "新增教室信息",
                closeBtn: 2,
                area: ['450px', '480px'],
                offset: ['100px', '200px'],
                shadeClose: true,
                content: $("#add-clazz"),
                end: function () {
                    //location.reload();
                }
            });
        }
    </script>

</head>

<body>

<!-- 新增按钮 -->
<div style="position: relative;top: 5px;left:5px">
    <button class="layui-btn layui-btn-warm layui-btn-small"
            onclick="clickThis()">新增教室信息
    </button>
</div>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-small" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-small" lay-event="del">删除</a>
</script>
<script>

    function this_status(status){
        if(status==true){
            return '开馆';
        }else{
            return '闭馆';
        }
    }

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test',
            url: 'clazzInfo',
            method:'get',
            toolbar: '#toolbarDemo',
            title: '教室信息表',
            cols: [[
                {
                    field: 'storey',
                    title: '楼层',
                    width: 80,
                    sort : true
                }
                , {
                    field: 'clazzName',
                    title: '教室名称',
                    width: 120
                }
                ,
                {
                    field: 'seatCounts',
                    title: '教室座位数目',
                    width: 180
                }
                ,
                {
                    field: 'status',
                    title: '开放状态',
                    width: 120,
                    templet:'<div>{{this_status(d.status)}}</div>'
                }
                ,
                {
                    field: 'openingTime',
                    title: '开馆时间',
                    width: 150
                }
                ,
                {
                    field: 'closingTime',
                    title: '闭馆时间',
                    width: 150
                }
                ,
                {
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150
                }
            ]],
            limits:[1,2,4,8,10],
            limit:10,
            page: true
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除当前信息么', function (index) {
                    location.href = "deleteClazz?id=" + data.id;
                });
            } else if (obj.event === 'edit') {


                //弹出新增信息框
                layer.open({
                    type: 1,
                    title: "修改教室信息",
                    closeBtn: 2,
                    area: ['450px', '480px'],
                    offset: ['100px', '200px'],
                    shadeClose: true,
                    content: $("#edit-clazz"),
                    success: function (layero, index) {

                        $("#editClazzId").val(data.id);
                        $("#editClazzStorey").val(data.storey);
                        $("#editClazzName").val(data.clazzName);
                        $("#editClazzSeatCounts").val(data.seatCounts);
                        $("#editClazzOpenTime").val(data.openingTime);
                        $("#editClazzColseTime").val(data.closingTime);

                        if(data.status){
                            $("#editClazzStatus").attr("checked",true);
                        }else {
                            $("#editClazzStatus").attr("checked",false);
                        }



                        var iframeWin = window; //获取window
                        var formEdit = iframeWin.layui.form; //获取form表单
                        formEdit.render();	//刷新该表单

                    },
                    end: function () {
                        //location.reload();
                    }
                });
            }
        });
    });
</script>

<!-- 新增表单 -->
<div id="add-clazz" style="display: none">
    <form class="layui-form" id="add-form" action="/addClazz"
          method="post">

        <div class="layui-form-item center">
            <label class="layui-form-label" style="width: 100px">楼层</label>
            <div class="layui-input-block">
              <input type="text" name="storey"  required value=""
                       style="width: 240px" lay-verify="required" placeholder="楼层"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">教室名称</label>
            <div class="layui-input-block">
                    <input type="text" name="clazzName"  required value=""
                           style="width: 240px" lay-verify="required" placeholder="教室名称"
                           autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">教室座位数 </label>
            <div class="layui-input-block">
                <input type="text" name="seatCounts" required style="width: 240px"
                       lay-verify="number" placeholder="教室座位数" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">开放状态 </label>
            <div class="layui-input-block">

                <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="true" id="status" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">开放时间 </label>
            <div class="layui-input-inline">
                <input type="text" id="test1" name="openingTime" required style="width: 240px"
                       lay-verify="number" placeholder="开馆时间" autocomplete="off"
                       class="layui-input">
                <input type="text" id="test2" name="closingTime" required style="width: 240px"
                       lay-verify="number" placeholder="闭馆时间" autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary"
                        id="closeBtn">重置
                </button>
            </div>
        </div>
    </form>
</div>


<!-- 修改表单 -->
<div id="edit-clazz" style="display: none" name="editForm">
    <br/>
    <form class="layui-form" id="edit-form" action="/updateClazz"
          method="post">

        <input type="hidden" name="id" value="" id="editClazzId"/>

        <div class="layui-form-item center">
            <label class="layui-form-label" style="width: 100px">楼层</label>
            <div class="layui-input-block">
                <input type="text" name="storey"  required value="" id="editClazzStorey"
                       style="width: 240px" lay-verify="required" placeholder="楼层"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">教室名称</label>
            <div class="layui-input-block">
                <input type="text" name="clazzName"  required value="" id="editClazzName"
                       style="width: 240px" lay-verify="required" placeholder="教室名称"
                       autocomplete="off" class="layui-input">

            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">教室座位数 </label>
            <div class="layui-input-block">
                <input type="text" name="seatCounts" required style="width: 240px" id="editClazzSeatCounts"
                       lay-verify="number" placeholder="教室座位数" autocomplete="off"
                       class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">开放状态 </label>
            <div class="layui-input-block">

                <input type="checkbox" name="status" id="editClazzStatus" lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">开放时间 </label>
            <div class="layui-input-inline">
                <input type="text" id="editClazzOpenTime" name="openingTime" required style="width: 240px"
                       lay-verify="number" placeholder="开馆时间" autocomplete="off"
                       class="layui-input">
                <input type="text" id="editClazzColseTime" name="closingTime" required style="width: 240px"
                       lay-verify="number" placeholder="闭馆时间" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  type="submit" style="position: relative;left:25px">立即提交</button>
            </div>
        </div>
    </form>
</div>


</body>
</html>

